<app-popup (getPopupSwitch)='popupSwitch($event)' position='top' >
    <div class="drop-menu">
        <div (click)='goto({data: item, index: i})' class="drop-menu-item " [class.active]='item.type === currentMenu.type' *ngFor='let item of menuList; let i = index;'>
            <div class="label">
                <div class="icon img-box">
                    <img [src]="item.icon" [alt]="item.title">
                </div>
                <h1 class="title">
                    {{item.title}}
                </h1>
            </div>
            <span class="num">
                {{item.num}}
            </span>
        </div>
    </div>
</app-popup>
<div class="menu">
    <div class="menu-header">
        <app-page-head></app-page-head>
        <div class="menu-top-bar">
            <div class="label">
                <h1 class="title">
                    {{currentMenu.title}}
                </h1>
                <span class="num">
                    {{currentMenu.num}}
                </span>
            </div>
            <i class="icon iconfont icon-menu" (click)='hiddenMenu(false)' (tap)='hiddenMenu(false)'></i>
        </div>
    </div>

    
    <div class="menu-content" *ngIf='menuList'  >
        
        <div [appScrollTop]='list' (scrollTop)='getScrollTop($event)'  class="product-list" *ngFor='let list of menuList'>
            <div class="product-list-header">
                <div class="img-box icon">
                    <img [src]="list.icon" alt="">
                </div>
            </div>
            <div class="product" *ngFor='let item of list.products'>
                <div class="product-info">

                    <h4 class="product-name">
                        {{item.name}}
                    </h4>
                    <p class="product-summer">
                        {{item.summer}}
                    </p>
                    <div class="product-price">
                        ￥<span class="em">{{item.price}}</span>
                    </div>
                    
                </div>
                <div class="product-img">
                    <div class="img-box">
                        <img [src]="item.imgUrl" [alt]="item.name">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 补充高度差 -->
<div class="menu-footer">
</div>